import { useEffect } from 'react'
import { Row, Col, Spin } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { 
  faUser, 
  faBook, 
  faBookOpen,
  faEye, 
  faArrowUp,
  faArrowDown
} from '@fortawesome/free-solid-svg-icons'
import { fetchDashboardStats, fetchDashboardTrends } from '@/store/slices/dashboardSlice'
import StatCard from './components/StatCard'
import TrendChart from './components/TrendChart'
import DataTable from './components/DataTable'
import QuickEntry from './components/QuickEntry'
import CategoryChart from './components/CategoryChart'
import './index.scss'

const Dashboard = () => {
  const dispatch = useDispatch()
  const { stats, trends, loading } = useSelector((state) => state.dashboard)

  useEffect(() => {
    // 加载Dashboard数据
    dispatch(fetchDashboardStats())
    dispatch(fetchDashboardTrends())
  }, [dispatch])

  // 顶部统计卡片数据（优先使用后端数据，否则使用默认数据）
  const statCards = stats ? [
    {
      title: '总用户数',
      value: stats.totalUsers || 0,
      suffix: stats.totalUsers > 10000 ? 'w+' : '',
      prefix: <FontAwesomeIcon icon={faUser} style={{ color: '#1890ff' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较昨日', 
        value: stats.userGrowth || '+0%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    },
    {
      title: '图书总数',
      value: stats.totalBooks || 0,
      prefix: <FontAwesomeIcon icon={faBook} style={{ color: '#722ed1' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较上月', 
        value: stats.bookGrowth || '+0%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    },
    {
      title: '今日阅读量',
      value: stats.todayReading || 0,
      prefix: <FontAwesomeIcon icon={faBookOpen} style={{ color: '#faad14' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较昨日', 
        value: stats.readingGrowth || '+0%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    },
    {
      title: '活跃用户率',
      value: stats.activeRate || 0,
      suffix: '%',
      prefix: <FontAwesomeIcon icon={faEye} style={{ color: '#13c2c2' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较昨日', 
        value: stats.activeRateGrowth || '+0%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    }
  ] : [
    {
      title: '总用户数',
      value: 12.8,
      suffix: 'w+',
      prefix: <FontAwesomeIcon icon={faUser} style={{ color: '#1890ff' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较昨日', 
        value: '+12.5%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    },
    {
      title: '图书总数',
      value: 9520,
      prefix: <FontAwesomeIcon icon={faBook} style={{ color: '#722ed1' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较上月', 
        value: '+8.3%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    },
    {
      title: '今日阅读量',
      value: 45680,
      prefix: <FontAwesomeIcon icon={faBookOpen} style={{ color: '#faad14' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较昨日', 
        value: '+18.2%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    },
    {
      title: '活跃用户率',
      value: 68.5,
      suffix: '%',
      prefix: <FontAwesomeIcon icon={faEye} style={{ color: '#13c2c2' }} />,
      valueStyle: { color: '#333', fontSize: 24 },
      footer: { 
        label: '较昨日', 
        value: '+2.8%', 
        icon: <FontAwesomeIcon icon={faArrowUp} />,
        className: 'increase' 
      }
    }
  ]

  // 图表数据 - 近7日阅读量趋势（优先使用后端数据）
  const chartData = trends?.readingTrend || [28500, 32100, 29800, 35600, 38900, 42300, 45680]

  return (
    <Spin spinning={loading} tip="加载中...">
      <div className="dashboard-container">
        {/* 顶部统计卡片 */}
        <Row gutter={[16, 16]}>
          {statCards.map((card, index) => (
            <Col xs={24} sm={12} lg={6} key={index}>
              <StatCard {...card} />
            </Col>
          ))}
        </Row>

      {/* 主体内容区域 */}
      <Row gutter={[16, 16]}>
        {/* 左侧区域：图表 + 表格 */}
        <Col xs={24} lg={17}>
          <div className="left-column">
            {/* 趋势图表 */}
            <TrendChart title="阅读量趋势" data={chartData} />
            
            {/* 数据表格 */}
            <DataTable title="热门图书排行" />
          </div>
        </Col>

        {/* 右侧区域：快捷入口 + 饼图 */}
        <Col xs={24} lg={7}>
          <div className="right-column">
            {/* 快捷入口 */}
            <QuickEntry title="快捷操作" />
            
            {/* 分类图表 */}
            <CategoryChart title="图书分类占比" />
          </div>
        </Col>
      </Row>
      </div>
    </Spin>
  )
}

export default Dashboard
